<div class="account block" data-title="银行卡管理" ms-controller="banklist">
    <div :visible="@step==1">
        <ms-tab ms-widget="{list: @tabList.list, active:@tabList.active}"></ms-tab>
        <div :if="@uploadList.length>0">
            <p class="mtop20">
                您提交的银行资料，必须要完成个人资料及银行资料审核后方可用作取款。为完成审核，请点击下面的
                <b class="primary">"上传"</b>
                按钮上传尚未提交的证明文件。如您已经完成身份证明、地址证明及银行证明的提交，请耐心等候批核结果。
            </p>
            <table width="100%" class="uploadTb">
                <tr>
                    <th>申请编号</th>
                    <th>持卡人姓名</th>
                    <th>银行名称</th>
                    <th>银行账号</th>
                    <th>银行卡账户类型</th>
                    <th>币种</th>
                    <th>操作</th>
                </tr>
                <tr :for="(index, el) in @uploadList">
                    <td>{{@el.id}}</td>
                    <td>{{@el.bankAccountName}}</td>
                    <td>{{@el.bankName}}</td>
                    <td>{{@el.bankAccountNumber}}</td>
                    <td>{{@el.bankAccountType}}</td>
                    <td>{{@el.bankCurrency}}</td>
                    <td>
                        <a href="#" class="m-btn" :visible="@el.bankInfoState=='EMPTY'">上传</a>
                        <span :visible="@el.bankInfoState=='PRE_APPROVAL'">审核中</span>
                    </td>
                </tr>
            </table>
        </div>
        <ul class="bankList">
            <li class="item" :hover="'hover'" 
                :class="{active: @bankActive==index}" 
                :for="(index, el) in @bankList"
                :click-1="@bankActive=index" 
                :click-2="@bankData=el" >
                <i class="line"></i>
                <span class="bankType">{{@el.bankAccountType}}</span>
                <span class="bankIcon" :class="@el.bank">{{@el.bank=='other' ? @el.bankOther : '' }}</span>
                <p class="cardNo">{{@el.bankAccountNumber | bankNumber}}</p>
                <div class="btnBox">
                    <button class="m-btn-default fr">取款到该卡</button>
                    <button class="m-btn-default">从该卡存款</button>
                </div>
            </li>
            <li class="item add" :class="{active: @bankActive==1000 || @bankList.length==0}"
                :visible="@bankList.length<3"
                :click-1="@bankActive=1000"
                :click-2="@loadDict">
                <i class="line"></i>
                <span class="addIcon">+</span>
                <p>添加银行卡</p>
            </li>
        </ul>
        <!-- 银行卡信息 start -->
        <div class="cardinfo" :visible="@bankActive<1000 && @bankList.length>0">
            <i class="line1"></i>
            <i class="line2"></i>
            <table width="100%">
                <tr>
                    <th width="120">持卡人姓名：</th>
                    <td width="185">{{@bankData.bankAccountName}}</td>
                    <th width="120">银行名称：</th>
                    <td>{{@bankData.bank=='other' ? @bankData.bankOther : @bankData.bankName}}</td>
                </tr>
                <tr>
                    <th>银行账号：</th>
                    <td>{{@bankData.bankAccountNumber | bankNumber}}</td>
                    <th>银行卡账户类型：</th>
                    <td>{{@bankData.bankAccountType}}</td>
                </tr>
                <tr>
                    <th>币种：</th>
                    <td>{{@bankData.bankCurrency}}</td>
                    <th>国际汇款代码：</th>
                    <td>{{@bankData.internationalRemittanceCode}}</td>
                </tr>
                <tr>
                    <th>银行国家：</th>
                    <td>{{@bankData.bankCountry=='other' ? @bankData.bankCountryOther : @bankData.bankCountry}}</td>
                    <th>银行地址：</th>
                    <td>{{@bankData.bankAddress}}</td>
                </tr>
            </table>
            <p class="tip">如需修改银行资料，请联络 <a href="javascript:;" :click="@contactfn">在线客服</a></p>
        </div>
        <!-- 银行卡信息 end -->

        <!-- 添加银行卡信息 start -->
        <div :visible="@bankActive==1000 || @bankList.length==0">
            <div class="cardinfo addBox" >
                <i class="line1"></i>
                <i class="line2"></i>
                <div class="loading" :visible="@listBankList.length==0" ></div>
                <table width="100%">
                    <tr>
                        <th width="120">持卡人姓名：</th>
                        <td width="185"><input type="text" class="textInput disabled" disabled="disabled" :attr="{value:@addBank.bankAccountName}"></td>
                        <th width="120">银行名称<i class="showy">*</i>：</th>
                        <td>
                            <select class="select" :duplex="@addBank.bank" :change="@changeSel('bank','listBankList')">
                                <option :for="el in @listBankList" :attr="{value:@el.code}">{{@el['name'+@lang]}}</option>    
                            </select>
                            <div class="mtop5" :visible="@addBank.bank=='other'">
                                <input type="text" class="textInput" placeholder="请输入银行名称" :duplex="@addBank.bankOther" >
                            </div>
                    </td>
                    </tr>
                    <tr>
                        <th>银行账号<i class="showy">*</i>：</th>
                        <td>
                            <input type="text" class="textInput" 
                                    :duplex="@addBank.bankAccountNumber" 
                                    :on-input="@formatBankAccount">
                        </td>
                        <th>银行卡账户类型<i class="showy">*</i>：</th>
                        <td><select class="select" :duplex="@addBank.bankAccountType" :change="@changeSel('bankAccountType','listBankAccountType')">
                            <option :for="el in @listBankAccountType" :attr="{value:@el.code}">{{@el['name'+@lang]}}</option>    
                            </select></td>
                    </tr>
                    <tr>
                        <th>币种<i class="showy">*</i>：</th>
                        <td><select class="select" :duplex="@addBank.bankCurrency" :change="@changeSel('bankCurrency','listBankCurrency')">
                            <option :for="el in @listBankCurrency" :attr="{value:@el.code}">{{@el['name'+@lang]}}</option>
                            </select></td>
                        <th>国际汇款代码：</th>
                        <td><input type="text" class="textInput" :duplex="@addBank.internationalRemittanceCode"></td>
                    </tr>
                    <tr>
                        <th>银行国家<i class="showy">*</i>：</th>
                        <td>
                            <select class="select" :duplex="@addBank.bankCountry" :change="@changeSel('bankCountry','listBanksCountry')" >
                                <option :for="el in @listBanksCountry" :attr="{value:@el.code}">{{@el['name'+@lang]}}</option>
                            </select>
                            <div class="mtop5" :visible="@addBank.bankCountry=='other'">
                                <input type="text" class="textInput" placeholder="请输入国家名称" :duplex="@addBank.bankCountryOther" >
                            </div>
                        </td>
                        <th>银行地址<i class="showy">*</i>：</th>
                        <td>
                            <select class="select bankProvince" :duplex="@addBank.bankProvince" :change="@changeSel('bankProvince','listProvince')" >
                                <option :for="el in @listProvince" :attr="{value:@el.code}">{{@el['name'+@lang]}}</option>
                            </select>
                            <select class="select bankCity" :duplex="@addBank.bankCity" :change="@changeSel('bankCity','listCities')" >
                                    <option :for="el in @listCities" :attr="{value:@el.code}">{{@el['name'+@lang]}}</option>
                            </select>
                            <div class="mtop5">
                                <input type="text" class="textInput" placeholder="请输入所属支行（选填）" :duplex="@addBank.bankBranch">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="4" align="center">
                            <button class="m-btn" :click="@addBankFn">提交</button>
                        </td>
                    </tr>
                </table>
            </div>
            <p class="tips">
                <i class="icon"></i>
                注：填写的银行资料将会作为您取款的收款账户。收款账户必须为账户本人所有，银行卡号亦须与账户登记时一致。填写完成后，请提供银行证明，经验证通过后方可作提款申请用。
            </p>
        </div>
        <!-- 添加银行卡信息 end -->
    </div>
    
    
    <!-- 确认银行卡信息 start -->
    <div class="bankConfirm" :visible="@step==2">
        <h2 class="h2_title">银行资料</h2>
        <div class="row mtop20">
            <p class="row-label">持卡人姓名<i class="showy">*</i>：</p>
            <div class="row-content">{{@addBank.bankAccountName}}</div>
        </div>
        <div class="row">
            <p class="row-label">银行名称<i class="showy">*</i>：</p>
            <div class="row-content">
                <span :text="@addBank.bank=='other' ? @addBank.bankOther : @addBankText.bank"></span>
                <!-- 
                    avalon 的奇葩问题，在上一步选择银行的时候选择其他，然后切换到其他银行时，这里渲染总是显示上一次选择的内容
                    所以增加一个隐藏的span同时渲染@addBankText.bank，可以解决此问题
                 -->
                <span :text="@addBankText.bank" class="hide"></span>
            </div>
        </div>
        <div class="row">
            <p class="row-label">银行账号<i class="showy">*</i>：</p>
            <div class="row-content">{{@addBank.bankAccountNumber}}</div>
        </div>
        <div class="row">
            <p class="row-label">银行卡账户类型<i class="showy">*</i>：</p>
            <div class="row-content">{{@addBankText.bankAccountType}}</div>
        </div>
        <div class="row">
            <p class="row-label">币种<i class="showy">*</i>：</p>
            <div class="row-content">{{@addBankText.bankCurrency}}</div>
        </div>
        <div class="row">
            <p class="row-label">国际汇款代码：</p>
            <div class="row-content">{{@addBank.internationalRemittanceCode}}</div>
        </div>
        <div class="row">
            <p class="row-label">银行国家<i class="showy">*</i>：</p>
            <div class="row-content">
                <!-- 
                    avalon 的奇葩问题，在上一步选择国家的时候选择其他，然后切换到其他国家时，这里渲染总是显示上一次选择的内容
                    所以增加一个隐藏的span同时渲染@addBankText.bank，可以解决此问题
                 -->
                <span :text="@addBank.bankCountry=='other' ? @addBank.bankCountryOther : @addBankText.bankCountry"></span>
                <span :text="@addBankText.bankCountry" class="hide"></span>
            </div>
        </div>
        <div class="row">
            <p class="row-label">银行地址<i class="showy">*</i>：</p>
            <div class="row-content">{{@addBankText.bankProvince + @addBankText.bankCity + @addBank.bankBranch}}</div>
        </div>
        <div class="row mtop10">
            <p class="row-label">
                <button class="m-btn mright10" :click="@addBankSubmit">确认提交</button>
            </p>
            <div class="row-content">
                <button class="m-btn-default" :click="@step=1">返回</button>
            </div>
        </div>
        <div class="tips">
            <i class="icon"></i>
            注：填写的银行资料将会作为您取款的收款账户。收款账户必须为账户本人所有，银行卡号亦须与账户登记时一致。填写完成后，请提供银行证明，经验证通过后方可作提款申请用。
        </div>
    </div>
    <!-- 确认银行卡信息 end -->
</div>